<template>
   <li>
	 <label>
		<input type="checkbox" 
		:checked='todoObj.done'
		@change="handleCheck(todoObj.id)"/>
		<!--如下代码也能实现功能，但是不太推荐，因为有点违反原则，因为修改了props -->
		<!-- <input type="checkbox" 
		 v-model="todo.done
		 "/> -->
		  
		<span>{{todoObj.title}}</span>
	 </label>
	 <!-- style="display: none" -->
     <button 
	 class="btn btn-danger"
	 @click='deleteToDo(todoObj.id)'
	 >删除</button>
	</li>
</template>

<script>
export default {
 name:'Item',
//  声明接收todo、checkTodo、
 props:['todoObj','checkTodo','deleteTodo'],
  
 methods: {
    handleCheck(id){
      console.log(id);
    // 通知App组件将对应的todo对象的done值取反
     this.checkTodo(id)
    },
    deleteToDo(id){
		if (confirm('确定要删除吗？')) {
			  this.deleteTodo(id) 
			// 通知App组件将此id的todo删除
		}
      
   }
 },
  
}
</script>

<style scoped>
/* Item */
li {
	list-style: none;
	height: 36px;
	line-height: 36px;
	padding: 0 5px;
	border-bottom: 1px solid #ddd;
}
li label {
	float: left;
	cursor: pointer;
}
li label li input {
	vertical-align: middle;
	margin-right: 6px;
	position: relative;
	top: -2px;
}
li button {
	float: right;
	display: none;
	margin-top: 3px;
}
li:before {
	content: initial;
}
li:last-child {
	border-bottom: none;
}
li:hover {
	background-color: #ddd;
}
li:hover button {
	display: block;
}


</style>